/**
 * @Author:高志斐
 * @Date:2020/7/6
 * @Description:这是评论页面
 */
import React,{Component} from "react";
import {Button, Icon, NavBar, WhiteSpace, List, Card, Toast, ImagePicker} from "antd-mobile";
import axios from 'axios';
import {URL} from "../../index";
import {Input} from "antd";
import {getCookieId} from "../Login/Component_Login/GetCookie";
const Item = List.Item;
const Brief = Item.Brief;
export default class UserComment extends Component{
    constructor(props) {
        super(props);
        const comBaseId=this.props.location.state.comBaseId
        const comBaseName=this.props.location.state.comBaseName
        this.state = {
            comments:[],//json表名
            user_comment:'',
            disabled: false,
            comBaseId:comBaseId,
            comBaseName:comBaseName
        }
        // this.loadData = this.loadData.bind(this)
        this.comment=this.comment.bind(this)
    }
    加载用户评论记录
    loadData(){
        axios({
            method:"GET",
            url:URL + "/userComment/showAllComments",
            params:{
                comBaseId:this.state.comBaseId
            }
        }).then(res=>{
            this.setState({
                comments:this.state.comments.concat(res.data.allComments)
            })
        }).catch(error =>{
            console.log(error)
        })
    }
    componentDidMount() {
        this.loadData()
    }
    comment(){
        console.log(this.state.user_comment)
        axios({
            method:"GET",
            url:URL + "/userComment/commentCombination",
            params:{
                comBaseId:this.state.comBaseId,
                userId:getCookieId(),
                commentContent:this.state.user_comment
            }
        }).then(res=>{
            console.log(res.data)
            if (res.data.code === 200) {
                Toast.info("评论成功")
                this.setState({
                    comments:[]
                })
                this.loadData()
            } else {
                Toast.fail("评论失败，请检查网络")
            }
        }).catch(error =>{
            console.log(error)
        })
    }
    onChangeComment= (e)=>{
        this.setState({
            user_comment:e.target.value
        })
    }
    render() {
        return(
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" style={{color:"#f8a83f"}}/>}
                    onLeftClick={
                        ()=> {window.history.back(-1)}
                    }
                >{this.state.comBaseName}讨论区
                </NavBar>
                <WhiteSpace />
                <List>
                    {(()=>{return this.state.comments.map((item,index)=>{
                        return(
                            <Card full>
                                <Card.Header
                                    title={item.userName}
                                    // thumb是用户头像
                                    thumb="https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg"
                                    thumbStyle={{borderRadius:"25px",marginRight:"10px",width:"30px",height:"30px"}}
                                />
                                <Card.Body>
                                    <div>{item.commentContent}</div>
                                </Card.Body>
                                <Card.Footer content={item.commentTime.substring(0,item.commentTime.length-2)} />
                                <WhiteSpace/>
                            </Card>
                        )
                    })
                    })()}
                </List>
                <footer className="comment-footer">
                    <Input
                        type="text"
                        placeholder="在此处发表评论"
                        value={this.state.user_comment}
                        onChange={(e)=>{this.onChangeComment(e)}}
                    />
                    <button onClick={this.comment}>评论</button>
                </footer>
            </div>
        );
    }
}
